import React, { useEffect, useMemo, useState } from 'react'
import { useLocation, useNavigate} from 'react-router-dom'

import '../assets/style/common/index1.scss'
import img1 from '../assets/images/ring.jpg'
import img2 from '../assets/images/user.png'
import { Modal } from 'antd';
import { Outlet } from 'react-router-dom'
export default function index() {
  const [btn, setBtn] = useState("login")
  const navigate = useNavigate()
  const [show, setShow] = useState(false) 
  const location = useLocation()
  function btnClick(btn) {
    setBtn(btn)
    if (btn == 'login') {
      navigate('/login')
    }
    // console.log(btn);
  }
  const [title, setTitle] = useState(
    [
      { _id: 1, task: "首页", status: "", font: "fonts",pathName:'/nav/home'},
      { _id: 2, task: "靶场演练", status: "", font: "" ,pathName:'/nav/detail'},
      { _id: 3, task: "在线CFT", status: "", font: "" ,pathName:'/nav/experiment'},
      { _id: 4, task: "个人中心", status: "", font: "" ,pathName:'/nav/mine'},
    ]
  )
  //隐藏框点击样式
  const [hideTitle, setHideTitle] = useState([
    { _id: 1, task: "个人中心", status: "activeBg" },
    { _id: 2, task: "我的收藏", status: '' },
    { _id: 3, task: "历史记录", status: "" },
    { _id: 4, task: "退出登录", status: "" },
  ])

  function changeTitle(pathName,task) {
 
    for (const item of title) {
      if (item.task==task) {
        // item.status = 'active123'
        setTitle(item.status='active123')
        setTitle(item.font = 'fonts')
        switch (task) {
          case '首页':
            navigate("/nav/home")  
            break
          case "靶场演练": 
            navigate('/nav/detail')
            break
          case "在线CFT":
            navigate('/nav/experiment') 
            break
          case "个人中心":   
            navigate('/nav/mine')
            break
          default:
            item.status = ''
            item.font = ""
            break
           
      }
      } else {
        item.status = ''
        item.font = ""
      }
      // setTitle([...title])
      setTitle([...title])
    }
    
  }

  useEffect(()=>{
    console.log(location.pathname);
  },[title])

  useMemo(()=>{
     return title.map(item=>{
        if(item.pathName==location.pathname){
            item.status = "active123"
        }
     })
  },[title])

  const changeHideTitle = (_id) => {
    for (const item of hideTitle) {
      if (item._id == _id) {
        item.status = 'activeBg'
      } else {
        item.status = ''
      }
      setHideTitle([...hideTitle])
    }
  }


  //控制隐藏框显示
  const showMegs = () => {
    setShow(!show)
    // console.log(show);
  }

  //退出登录
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('你确定退出吗？');
  const showModal = (val) => {
    if (val == '退出登录') {
      setOpen(true);
    }

  };
  //模态框点击确定
  const handleOk = () => {
    setModalText('你确定退出吗？');
    setConfirmLoading(true);
    setTimeout(() => {
      setOpen(false);
      setConfirmLoading(false);
    }, 2000);
    localStorage.clear()
    navigate('/login')
  };
  const handleCancel = () => {
    console.log('Clicked cancel button');
    setOpen(false);
  };




  return (
   
 <div className="page2 flex-col">
      <div className="group_11 flex-row">
        <div className='box_1'>
          <img
            className="image_1"
            src={"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc68204465c2f94daedb068c6ac1f78f3dc582a2ff153081c8eadc5a6f7eee1ea"} />

          {
            title.map(item => {
              return <div className="box_3 " key={item._id} onClick={() => { changeTitle(item.pathName,item.task) }}>
                <span className={'text_111' + ' ' + item.font}>{item.task}<div className={item.status}></div></span>
              </div>

            })
          }

        </div>

        {/* <span className="text_2">蜗牛学堂<div></div></span>
        <span className="text_3">网安实验<div></div></span>
        <span className="text_4">在线课堂<div></div></span>
        <span className="text_5">职业规划<div></div></span>
        <span className="text_6">赛事中心<div></div></span>
        <span className="text_7">校企合作<div></div></span> */}
        <div className="box_2 flex-row">
          <input className="text_81" placeholder='Web渗透' />
          <img
            className="thumbnail_4"
            src={
              "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge1bf599087e3c5266d148a6961cc4010028e792bf889d7a4de9437ecf4246f67"
            }
          />
          {/* 登录，注册按钮 */}
          <div className={localStorage.token ? 'hidding' : ''}>
            <div className='btns'>
              <button className={btn === "login" ? 'text-wrapper_11 text_91' : 'text_91'} onClick={() => { btnClick('login') }}>登录</button>
              <img
                className="thumbnail_21"
                src={
                  "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf3d0f07efd22da917b0793cf58ea467f491d954dc1d5d5364abcb89d5269a43a"
                }
              />
              {/* <div className="flex-col"> */}
              <button className={btn === "reg" ? 'text-wrapper_11 text_101' : 'text_101'} onClick={() => { btnClick('reg') }}>注册</button>
              {/* </div> */}
            </div>
          </div>


          {/* 登录后筛选 */}
          <div className={localStorage.token ? 'icon' : 'hidding'}>
            <img src={img1} alt="" className='ring' />
            <img src={img2} alt="" className='userIcon' onClick={() => { showMegs() }} />
            <div className={show ? " megs" : 'megs hidding'} >
              <ul>
                {
                  hideTitle.map(item => {
                    return <li className={item.status} key={item._id}
                      onClick={() => { changeHideTitle(item._id), showModal(item.task) }}><div>{item.task}</div></li>
                  })
                }

                {/* <li><div>我的收藏</div> </li>
                <li><div>历史记录</div> </li>
                <li><div>退出登录</div> </li> */}
              </ul>
            </div>
          </div>

        </div>



      </div>

      <Modal
        title="提示"
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        okText='确定'
        cancelText='取消'
      >
        <p>{modalText}</p>
      </Modal>
      <Outlet/>
    </div>
   
   
  )

}
